<template>
  <div>
    御剑乘风来,除魔天地间!---father==={{ $store.state.count }} =====辅助函数 -
    mapState==={{ count }}==={{ name }}
    <button @click="add">按钮+++</button>
    <button @click="addSync">按钮sync</button>
    =====求和:{{ this.$store.getters.total }}==={{ total }}
    <hr />
    <button @click="moduleHandle">module-namespaced</button>
    ===年龄{{ this.$store.state.user.age }}

    <Son></Son>
  </div>
</template>
<script>
import Son from '@/VuexStroe/Son.vue'
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default {
  name: '',
  components: {
    Son
  },
  data () {
    return {
      obj: {
        n: 5
      }
    }
  },
  created () {
    console.log(this, 123432)

  },  
  computed: {
    ...mapState(['count', 'name']),
    ...mapGetters(['total'])
  },
  methods: {
    ...mapMutations(['addHandle']),
    ...mapActions(['syncHandle']),
    add () {
      // 点击按钮触发mutations
      console.log(this)
      //触发mutations中的函数需要使用 commit方法
      //this.$state.commit('mutations中定义好的方法')
      //可以携带参数,obj等
      // this.$store.commit('addHandle', this.obj)
      this.addHandle(this.obj)
      // this.$store.state.count++
    },
    addSync () {
      //触发actions中的函数需要使用 dispatch方法
      //this.$state.dispatch('actions中定义好的方法')
      //可以携带参数,obj等
      // this.$store.dispatch('addHandle', this.obj)
      // this.$store.dispatch('syncHandle')
      this.syncHandle(2)
    },
    moduleHandle () {
      this.$store.commit('user/addModule')
    }
  }
}
</script>
<style lang='less'  scoped>
</style>
